Peletakan 
a Komposisi 


Ini bicara tentang meletakkan perabotan di rumah Anda. Berkaitan 
juga untuk menentukan berapa kecil dan besar ruang yang harus di- 
sediakan untuk menempatkan perabotan tertentu atau untuk fungsi 
tertentu. 


Gambar 5.1 Menempatkan gajah di rumah yang sempit 


Jika peletakan barang tidak pada tempatnya, walaupun rumah Anda 
bagus dengan desain yang mahal, pada saat masuk, orang akan 
merasa aneh. Menemukan bak mandi di ruang tamu misalkan, itu 


75 


contoh ekstremnya. Atau, ruang tamu lebih kecil dibanding dengan 
kamar mandi. Atau, memelihara gajah di rumah yang kecil. 


Peletakan (layout) dan komposisi untuk website akan membicarakan 
hal-hal seperti itu. Untuk lebih jelasnya, mari kita lanjutkan. 


TIPS #91: Informasi penting di atas halaman 
lipat 


Halaman lipat (fold line) yang dimaksud adalah daerah tanpa scroll 
sewaktu Anda membuka halaman website pertama kali. Resolusi 
komputer pengunjunglah yang menentukan fold line ini, jadi pertim- 
bangkan hal ini. 


© > C D wwwutahgov/index >? LOOPY: 


Gambar 5.2 Informasi di atas halaman lipat (tanpa scroll) 


Tempatkan informasi-informasi penting yang harus diketahui pengun- 
jung pertama kali di atas halaman lipat, atau saat pengunjung website 
membuka website Anda tanpa harus scroll ke bawah. Karena infor- 
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masi penting ini kunci untuk menentukan apakah pengunjung lanjut 
melihat (scroll) ke bawah, atau tidak perlu lanjut dan pergi ke website 
lain. Jadi, balik lagi ke perencanaan semula untuk menentukan infor- 
masi penting tersebut. 


€ > C D mewutahgon/inde or LONDO = 
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Real-time public 
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g You 
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Homework Help Amber Aerts First Lady Legislative Calendar WEB 6 ey 
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BeReady utan gov 211- Serice Information  Anomey General Utan Senate web Site 
511 -Roadtravel into Treasurer Mouse ot Representamves AO Ona m pus naben, Vow moro of Wish gov's 
911 - Emergency Help State Auditor award-winning projects » 


‘Ste Map | Contact Utah gov | Terms of Use | Securty | Privacy Polcy | Accessiity | Feedback | Awards | Translate Utah gav 
Copyright © 2019 State of Utah - Al rights reserved. 


Gambar 5.3 Informasi di bawah halaman lipat (setelah scroll) 


TIPS #92: Buat halaman yang dapat dicetak 


Orang biasanya malas untuk membaca online. Jadi, sediakan ikon 
atau fitur print sehingga mereka bisa mencetak artikel Anda di printer 
mereka. 


TIPS #93: Pertegas sesuatu yang penting 


Pengunjung pada saat masuk, mereka scanning terlebih dahulu, tidak 
membaca. Oleh karena itu, ada sesuatu yang harus dipertegas 
sehingga mereka melihat hal tersebut. 


WAR 


DESTROYS 
CHILDREN'S 


LIVES 


LEARN MORE ABOUT WAR CHILD 


Gambar 5.4 Tulisan yang besar untuk mempertegas tujuan website 


Tetapi tentu desain seperti di atas tidak bisa digunakan untuk semua 
website. Yang penting ada tulisan yang membuat pengunjung mem- 
bacanya, kemudian mereka tertarik untuk tahu lebih lanjut. 


TIPS #94: Gunakan centred layout 


Centred Layout menempatkan konten website di tengah halaman 
yang besar. Tujuannya agar membuat daerah konten lebih kecil 
dibanding dengan lebar halaman dengan area kosong (gutter) di 
pinggir kiri dan kanan, tergantung pada ukuran browser. 


Jika Anda membuat ukuran website untuk resolusi monitor 
1024x768, maka area putih tersebut tidak ada. Tetapi saat di lain 
monitor dengan resolusi 1680x1050, maka area putih itu sudah ada. 


Ini bisa Anda lakukan di CSS dalam mengatur konten. 
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Gambar 5.5 Centred Layout 
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Gambar 5.6 KPlUnion.org menggunakan Centred Layout 


TIPS #95: Fixed layout 


Fixed Layout atau layout tetap/tidak berubah di setiap ukuran 
browser. Jadi, kalau Anda membuat website untuk resolusi monitor 
1024x768, maka ketika dibuka di resolusi monitor 800x600 akan 
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otomatis mengecilkan ukuran browser. Maka website Anda akan 
terpotong. Desain tidak berubah sama sekali walaupun ukuran brow- 
ser berubah. 


€ > X D uscoca-cola.com 2OeFGRSu4= 


Galah 


family, food and Coca-Cola’ 
recipe for a great meal 


with your favorite meal: 


Recipes & How-to Videos 


Vending Machine Keeps Drinks 
Cool Without Power 


EXPLORE 
THE WORLD OF AHH 


Gambar 5.7 Cocacola.com menggunakan Fixed Layout 
dengan browser normal 


Mungkin Anda bertanya, kapan digunakan fixed layout? Pertanyaan 
yang bagus! 


Fixed layout digunakan untuk mereka yang ingin mendesain secara 
bebas tanpa perlu memedulikan ukuran browser pengunjung web- 
site. 


Berarti si web designer tidak benar dong yah, harusnya mereka 
memerhatikan pengunjung. Jawabannya bisa iya atau tidak. Kalau si 
web designer sudah mempunyai target untuk pengunjung yang 
menggunakan komputer desktop dengan komputer yang cukup tinggi 
karena ada aplikasi di dalam website yang butuh itu, maka tidak ada 
salahnya juga. Yang penting Anda sudah menentukan sejak awal. 
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Gambar 5.8 Cocacola.com menggunakan Fixed Layout 
ketika browser mengecil, ada gambar yang terpotong 


Ukuran di fixed layout menggunakan ukuran pixel di html atau css 
untuk membuat desain tidak berubah saat browser mengecil atau 
membesar. 


TIPS #96: Flexible atau liquid layout 


Flexible atau Liquid Layout akan berubah bila ukuran browser 
berubah. Biasanya pemilik website ingin mengakomodir sebanyak 
mungkin pengunjung website supaya bisa melilhat websitenya dalam 
berbagai jenis ukuran monitor atau browser. 
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Gambar 5.9 Rajaampatdoberai.com menggunakan liguid layout 
dengan browser normal 


< C |} wewsajaampatdoberai.com Tor Pen: 


About Us FAQ Location Contact Us 


Gambar 5.10 Rajaampatdoberai.com menggunakan liquid layout 
dengan browser yang mengecil 
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Tetapi liquid layout punya kelemahan juga, kalau Anda tidak mem- 
punyai keahlian html dan css yang cukup, desain Anda bisa rusak atau 
terlihat aneh bila browser tersebut mengecil atau membesar. 


Jadi, ada juga web designer yang tidak suka layout seperti ini karena 
desainnya tidak bisa sebebas menggunakan fixed layout karena harus 
mengakomodir segala jenis ukuran browser. 


Dan Liguid layout menggunakan ukuran persen di html dan css 
supaya layout bisa fleksibel mengikuti ukuran browser. 


Jadi lagi-lagi ini pilihan, tidak ada yang paling benar. Tergantung 
tujuan Anda membuat website. 


TIPS #97: Jurus 1, layout 3 kotak 


Gambar 5.11 Layout 3 kotak dari Joshua Johnson 


Ini adalah 10 jurus layout dari Joshua Johnson, salah satu web 
designer dunia yang mengasuh designshack.net untuk mempermu- 
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dah pekerjaan dan menghemat waktu para web designer dalam 
membuat layout website. 


Jurus 3 kotak (Three boxes) adalah layout yang paling sederhana, 
yang menempatkan 1 kotak atau gambar utama yang besar yang 
diikuti oleh kotak kecil di bawahnya. Masing-masing kotak kecil itu 
bisa diisi oleh gambar ataupun tulisan. Tetapi kotak yang besar 
biasanya diisi oleh gambar yang berganti-ganti menggunakan jQuery. 


Kotak-kotak kecil yang paling atas bisa berisi logo dan fungsi-fungsi 
navigasi, seperti kotak pencarian atau ikon, seperti facebook, twitter. 


Desain layout ini sangat cocok untuk menampilkan halaman portfolio 
atau apa pun untuk menampilkan beberapa gambar. 


PETER VERKUILEN Design + Comsnting Welcome Designs About 


Gambar 5.12 Contoh website dengan layout 3 kotak 
dari Joshua Johnson 
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TIPS #98: Jurus 2, layout tampilan 3D 


Akhir-akhir ini tampilan 3D (3D Screenshot) sangat populer di bebe- 
rapa website. Karena efek 3D tersebut dapat membuat website 
tampil sangat sederhana, bersih, tetapi tetap terkesan keren dan 
tidak murahan. Memang dibutuhkan gambar dengan ukuran bagus 
dan resolusi tinggi. 


BB Logo EES 


Lorem ipsum doller set 


Lorem ipsum dolor sit amet, consectetur adipiscing olit. Praesent euismod ultrices anto, 


ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. 


Gambar 5.13 Layout tampilan 3D dari Joshua Johnson 


Hi and welcome to my portfolio ! 


This is a showcase of my templates for sale exclusively on Themeforest & Codecanyon. 
If you need a customized version of any of these files, feel free to drop me an email below. 


Gambar 5.14 Contoh website dengan layout tampilan 3D 
dari Joshua Johnson 
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TIPS #99: Grid sebagai alat bantu layout 


Grid adalah kisi-kisi dalam bentuk garis untuk membantu web 
designer dalam meletakkan objek atau elemen-elemen secara rapi 
dan proporsional sesuai dengan besar-kecilnya objek tersebut. 


Juga untuk menjaga jarak antarobjek secara sama, teratur, dan indah. 
Dalam istilah desain disebut whitespace, memberikan ruang yang 
cukup antarobjek sehingga terlihat keindahannya. 


Gambar 5.15 Grid dan denah rumah 


Jangankan membuat layout website, membuat layout rumah pun 
seorang arsitek memerlukan grid. Tujuannya saat pelaksanaan, 
desain yang dibuat akan secara otomatis mengikuti layout tersebut 
sehingga tata letak, komposisi, kerapian, keteraturan, keseimbangan 
terjaga. Dan desain yang sekalipun sederhana akan terlihat indah dan 
elegan dibanding dengan desain yang diberi efek-efek sulit, tetapi 
tidak mengikuti kaidah tata letak dan komposisi yang baik. 


Kalau tidak menggunakan grid, hanya menggunakan perasaan saja, 
maka jangan heran nanti Anda selalu merasa tidak puas karena 
perasaan bisa berubah-ubah. Nanti desain pun juga akan berubah- 
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Ubah. Oleh karena itulah, para desainer, khususnya para pemula bisa 
menggunakan grid sebagai alat bantu untuk membuat keseimbangan 


dan keindahan dalam desain. 


Gambar 5.16 Beberapa contoh layout web menggunakan grid 


John R Corrigan 


TIPS #100: Jurus 3, layout advanced grid 
Banyak layout website terbantu sekali dengan grid. Tetapi rahasia 


yang harus Anda tahu tentang grid adalah, hindari halaman website 
dengan gambar-gambar (thumbnail) yang seragam atau sama. Layout 


87 


website berikut ini juga mempunyai variasi ukuran gambar untuk 
menghindari pengulangan atau kebosanan. Hal yang sama juga 
terlihat pada layout 3 kotak, tidak semuanya sama, ada 1 kotak besar 
dan 2 kotak kecil di bawahnya. 


Kotak-kotak hitam di bawah ini tidak harus berupa gambar, tetapi 
tulisan juga boleh. 


Gambar 5.17 Layout Advanced Grid dari Joshua Johnson 


Contoh website di bawah ini menggunakan advanced grid. Dan kita 
bisa melihat tidak semuanya gambar, tetapi ada campuran tulisan 
juga sehingga terlihat harmonis satu sama lain dalam grid yang sudah 
dibuat. 


(XG; | ABOUT PROCESS SHOP Custom 8106 CONTACT 


INSPIRED handmade clothing for children 


Gambar 5.18 Contoh website dengan layout advanced grid 
dari Joshua Johnson 


TIPS #101: Jurus 4, layout featured graphic 


Terkadang Anda tidak punya banyak stok gambar atau foto untuk 
website Anda. Layout featured graphic (sisipan/tonjolan grafik) ini 
adalah solusinya dan cukup populer belakangan ini. Anda bisa meng- 
gunakan satu ikon, foto kecil, ataupun simbol. 
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Lorem Ipmsum 


Lorem ipsum dolor sit amet, consectetur adipi- 
soing elit. Praesent euismod ultrices ante, ac 
laoreet nulla vestibulum adipiscing. Nam quis justo 
in augue auctor imperdiet. Curabitur aliquet orci sit 
amet est posuere consectetur. Fusce nec leo ut 
massa viverra venenatis. Nam accumsan libero a 
elit aquet quis ullamcorper arcu tincidunt. Prae- 


Gambar 5.19 Layout featured graphic dari Joshua Johnson 


BloomFirst® 


Mome Treidea The Designs The Dashbossd Support 


Affordable Websites 


We believe you deserve a first class 
website with all the bells and whistles 
It should look amazing and be super 
simple to edit + update. And it 
shouldn't cost thousands of dollars. 


We believe we have the solution. 


Gambar 5.20 Contoh website dengan layout featured grahic 
dari Joshua Johnson 


TIPS #102: Jurus 5, layout 5 kotak 


Layout ini adalah kelanjutan dari layout 3 kotak sebelumnya. Ini 
untuk mengakomodir konten yang lebih banyak. Ide dasarnya masih 
sama, yaitu kotak hitamnya bervariasi dan isi kotak tersebut bisa 
gambar atau tulisan. 
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Gambar 5.21 Layout 5 kotak dari Joshua Johnson 


Layout ini sangat serbaguna dan bisa digunakan di hampir semua 
jenis website. Anda bisa mengisinya dengan latar belakang gambar, 
membuat sudut lengkung, menambah bayangan atau seperti refleksi. 
Bisa juga Anda menambahkan tombol kanan dan kiri yang dapat 
menggerakkan gambar secara horizontal. 


Dua contoh website di bawah ini mempunyai fungsi yang berbeda 
untuk setiap kotak layout tersebut. Juga dari sisi desain, yang satu 
menggunakan gaya ilustrasi, yang lain menggunakan foto. Jadi, layout 
membuat Anda menjadi lebih kreatif tanpa harus terlihat kaku. 
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Coach | Engi 


Gambar 5.22 Contoh website dengan layout 5 kotak 
dari Joshua Johnson 


Gambar 5.23 Contoh website dengan layout 5 kotak 
dari Joshua Johnson 
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TIPS #103: Jurus 6, layout fixed sidebar 


Hampir semua website yang kita lihat saat ini memiliki navigasi di 
bagian atas. Tetapi ada alternatif yang juga digunakan oleh keba- 
nyakan website adalah navigasi di bagian samping secara vertikal. 
Tujuan navigasi seperti ini adalah agar mudah diakses walaupun 
website tersebut di-scroll. 


Gambar 5.24 Layout fixed sidebar dari Joshua Johnson 


Walaupun menggunakan layout yang sama, kita bisa melihat contoh 
dua website berikut ini memiliki desain yang sama sekali berbeda. 
Gunakan kreativitas Anda untuk mendesain berdasarkan contoh- 
contoh yang diberikan. 
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Gambar 5.25 Contoh website dengan layout fixed sidebar 
dari Joshua Johnson 
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Gambar 5.26 Contoh website dengan layout fixed sidebar 
dari Joshua Johnson 


TIPS #104: Jurus 7, layout headline & gallery 


Ingin membuat halaman galeri yang sederhana tetapi elegan? Layout 
ini solusi yang baik sekali, gambar yang ditempatkan rapi mengguna- 
kan grid yang seragam dan ada headline (judul), dan bila perlu bisa 
ditambah dengan sub-head (atau subjudul). Intinya adalah membuat 
tulisan judul tersebut besar dan tebal. Anda bisa menggunakan jenis 
tulisan yang aneh-aneh di sini. 


Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Praesent euismod ultrices 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent 
eusmod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam 


Gambar 5.27 Layout headline dari Joshua Johnson 


Contoh website berikut ini dibuat oleh perusahaan jasa pembuat 
website untuk menampilkan logo-logo klien yang pernah dibuat 
dengan visual yang menarik menggunakan animasi jQuery dan sedikit 
interaksi. 
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Gambar 5.28 Contoh website dengan layout headline 
dari Joshua Johnson 


TIPS #105: Jurus 8, layout featured photo 


Your 
Logo 


Gambar 5.29 Layout featured photo dari Joshua Johnson 
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Layout ini diperuntukkan untuk mereka para fotografer yang ingin 
menampilkan karyanya. Idenya adalah menampilkan foto yang besar, 
apakah karya desain atau foto Anda, dengan ditemani oleh navigasi 
vertikal di sisi kirinya. Navigasinya paling baik menggunakan rata kiri, 
tetapi silakan bereksperimen dengan rata tengah atau rata kanan. 
Karena desain tidak ada yang salah atau benar, tetapi lebih pada 
tepat atau tidak tepat desain tersebut untuk tujuan tertentu. 


Contoh website di bawah ini dengan jQuery. Foto Anda bisa bergerak 
atau beranimasi dengan efek-efek yang menakjubkan dan membuat 
foto Anda terlihat hidup dan mewah. 


wus 


bar 


PORTAIOUO 


MATRIMONIOS 


Gambar 5.30 Contoh website dengan layout featured photo 
dari Joshua Johnson 


TIPS #106: Jurus 9, layout power grid 


Ini adalah layout yang paling rumit dari 10 jurus yang diberikan oleh 
Joshua Johnson, tetapi sekaligus merupakan layout yang paling 
efektif untuk menampung semua jenis konten website. Dari gambar, 
foto, musik, tulisan, dan video. Anda dapat memasukkan apa pun ke 
dalam layout tersebut tetapi tetap rapi dan seimbang. 
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Perhatikan ada sebuah wadah besar memanjang ke bawah yang 
menyesuaikan dengan serangkaian kotak-kotak kecil di samping kiri. 
Ini bisa diisi oleh berbagai variasi konten. 


Gambar 5.31 Layout power grid dari Joshua Johnson 


Berikut ini contohnya. Di wadah besar itu terisi konten dari twitter, 
foto, berbagai daftar, gambar, dan lain-lain. Layout ini mudah sekali 
diperluas bila ada tambahan konten yang masuk. 
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Gambar 5.32 Contoh website dengan layout power grid 


dari Joshua Johnson 
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Gambar 5.33 Contoh website dengan layout power grid 
dari Joshua Johnson 
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TIPS #107: Jurus 10, layout full screen photo 


Layout terakhir dari Joshua Johnson benar-benar sangat cocok untuk 
para fotografer. Juga cocok untuk website apa pun dengan latar 


belakang gambar atau grafik yang besar, dan dengan konten yang 
sangat terbatas atau sedikit. 


Lorem Ipsum 


Lorem Ipsum 


Gambar 5.34 Layout full screen photo dari Joshua Johnson 


Gambar 5.35 Contoh website dengan layout full screen photo 
dari Joshua Johnson 
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Tetapi tentu sangat sulit membaca tulisan dengan latar belakang 
gambar atau foto. Oleh karena itu, dibuatlah semacam kotak hitam 
yang solid atau transparan memanjang untuk meletakkan tulisan. 


Pisahkan kotak hitam memanjang tersebut dalam beberapa bagian 
sehingga Anda tidak kesulitan untuk mengisi konten. 


TIPS #108: Layout dengan BlueprintCSS 


Blueprint merupakan CSSframework, yang bertujuan untuk memper- 
singkat waktu desain. Istilah framework mengandung arti bahwa 
Anda tidak harus membuat dari awal, atau dari nol. Ini sudah ada 
landasannya, sudah dibuatkan oleh orang lain. Anda tinggal pakai, 
tinggal dikembangkan sesuai dengan kreativitas Anda masing-masing. 


Gambar 5.36 GRID dalam format PSD dari Blueprintcss 


Silakan mengunjungi situsnya dan download file template-nya di 
www.blueprintcss.org, dan tidak perlu diperdebatkan mana yang 
paling bagus. Tidak ada yang paling bagus, silakan dicoba satu per 
satu dan tentukan mana yang paling nyaman untuk Anda. Karena 
semua layout framework tersebut untuk mempermudah Anda dalam 
bekerja mendesain website. 
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TIPS #109: Layout dengan 960.gs 


Jika Anda masih belum puas dengan template layout yang telah 
diberikan sebelumnya, Anda juga bisa mencoba atau bahkan meng- 
gabungkannya dengan sistem grid yang dibuat oleh Nathan Smith, 
seorang designer dan juga programmer salah satu perusahaan dunia. 


Nathan Smith membuat sistem grid 12, 16, dan 24 kolom dalam 
bentuk file desain, berikut html dan css-nya. Berbagai file desain 
dibuatnya untuk software desain Acorn, Fireworks, Flash, InDesign, 
GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, OuarkXPress, 
Visio, Exp Design. Anda bisa men-download file itu dan menggu- 
nakannya. 


Gambar 5.37 GRID 12, 16, dan 24 kolom dalam format PSD dari 960.gs 
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Gambar 5.38 Situs 960.gs milik Nathan Smith 


TIPS #110: The rule of thirds 


Aturan ini membagi gambar dalam 3x3 bagian. Ada 2 grid horizontal 
dan 2 grid vertikal, dan grid-grid ini akan membantu Anda untuk 
mengetahui bagaimana proses mata melihat satu gambar atau 
beberapa kelompok gambar (seperti website). 


Aturan ini sudah dikenal beberapa ratus tahun lalu, ada buku yang 
ditulis oleh John Thomas Smith, yaitu "Remarks on Rural Scenery" 
(1797) tentang hal ini. Dan aturan ini digunakan dalam hal melukis, 
fotografi, dan desain. 
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Tetapi apakah di web desain bisa? 


Terlebih dahulu mari kita melihat gerakan mata saat melihat satu 
gambar. 


Eye scanning and the rule of thirds 


1% 20% 
T F 


ee 


25% 4% 


Gambar 5.39 Gerakan mata dalam rule of thirds 


Perhatikan ada 4 simbol “+” yang ada di setiap perpotongan grid atau 
garis. Perpotongan pertama (kiri atas) adalah bagian gambar yang 
paling banyak dilihat terlebih dahulu oleh mata sekitar 41%, kemu- 
dian bergerak menyusuri potongan kedua (kiri bawah) sebesar 25%, 
lalu ke potongan ketiga (kanan atas) sebesar 20%, dan terakhir di 
kanan bawah sebesar 14%. 


Lihat gambar berikut. Mata seorang wanita sangat menarik melihat 
langsung kepada Anda, oleh karena itu diletakkan di perpotongan 
pertama yang paling dulu dilihat oleh mata Anda. Jadi, seakan-akan 
gambar tersebut menatap langsung ketika Anda pertama kali dan 
dengan cepat melihat gambar tersebut. 
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Gambar 5.40 Pergerakan mata pada gambar dalam rule of thirds 


Tulisan “A radically different...” dalam gambar di bawah ini diletakkan 
tepat pada perpotongan pertama dan ketiga karena ingin dibaca lebih 
dulu. 
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Gambar 5.41 Pergerakan mata pada desain website dalam rule of thirds 
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Dan dalam gambar di bawah ini, header, banner, menu navigasi dan 
logo diletakkan di bagian atas sehingga pengunjung website Anda 
akan melihat bagian itu terlebih dahulu. 
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Gambar 5.42 Pergerakan mata pada desain website dalam rule of thirds 


107 


